import React, { useState } from 'react'
import { SideBar } from 'antd-mobile'
import { regions } from './list'
import { useNavigate } from 'react-router-dom'
import { Sidebar, Toast } from 'react-vant';
import style from './index.module.css'
import './index.css'
const Index: React.FC = () => {
    const [activeIndex, setActiveIndex] = useState(0)
    const navigate = useNavigate()
    const handleClick = (city: any) => {
        // Toast.success(city)
        navigate('/')
        localStorage.setItem('city', JSON.stringify(city))
        console.log(city);

    }
    return (
        <div>
            <div className={style.citylisttitle}>选着地区 <span onClick={() => navigate(-1)} style={{ fontSize: '14px', color: '#1d7bff', marginLeft: '60px' }}>取消</span></div>
            <div className={style.activebox}>
                <div className={style.activeleft}>
                    {

                        regions.map((item, index) => {
                            return <div key={index} className={index === activeIndex ? style.active : ''} onClick={() => setActiveIndex(index)}>
                                {item.name}
                            </div>
                        })
                    }
                </div>
                <div className={style.activeright}>
                    {
                        regions[activeIndex].cities.map((city, index) => {
                            return <div key={index} onClick={() => handleClick({ city })}>
                                {city}
                            </div>
                        })
                    }
                </div>
            </div>

        </div>
    )
}

export default Index
